// Element Plus 深色模式变量覆盖
html.dark {
  // 全局变量
  --el-bg-color: #1a1a1a;
  --el-bg-color-overlay: #242424;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #a3a6ad;
  --el-border-color: #4c4d4f;
  --el-border-color-light: #363637;
  --el-fill-color-blank: #1a1a1a;
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
  
  // 组件变量
  --el-fill-color: var(--el-bg-color);
  --el-fill-color-light: #2c2c2c;
  --el-fill-color-lighter: #262626;
  --el-fill-color-extra-light: #191919;
  --el-border-color-darker: #636363;
  --el-border-color-dark: #5c5c5c;
  
  // Rate 组件
  --el-rate-void-color: rgba(128, 128, 128, 0.4);
  --el-rate-star-color: #ffd21e;
  --el-rate-star-color-hover: #ffd21e;
  --el-rate-disabled-void-color: rgba(128, 128, 128, 0.4);
  
  // Tag 组件
  --el-tag-bg-color: #2c2c2c;
  --el-tag-border-color: #4c4d4f;
  --el-tag-text-color: #e5eaf3;
  --el-tag-hover-bg-color: #363637;
  
  // 分页组件
  --el-pagination-bg-color: transparent;
  --el-pagination-hover-color: var(--el-color-primary);
  --el-pagination-button-bg-color: #2c2c2c;
  --el-pagination-button-disabled-bg-color: #1a1a1a;
  
  // 按钮组件
  --el-button-bg-color: #2c2c2c;
  --el-button-border-color: #4c4d4f;
  --el-button-hover-bg-color: #363637;
  --el-button-hover-border-color: #5c5c5c;
  --el-button-active-bg-color: #262626;
  --el-button-active-border-color: #4c4d4f;
  
  // 输入框组件
  --el-input-bg-color: #2c2c2c;
  --el-input-border-color: #4c4d4f;
  --el-input-hover-border-color: #5c5c5c;
  --el-input-focus-border-color: var(--el-color-primary);
  
  // 商家回复区域样式
  .review-reply {
    background-color: var(--el-fill-color-light) !important;
    border-color: var(--el-border-color) !important;
    
    .text-primary-600 {
      color: var(--el-color-primary) !important;
    }
    
    .text-gray-600 {
      color: var(--el-text-color-regular) !important;
    }
    
    &:hover {
      background-color: var(--el-fill-color-lighter) !important;
    }
  }
  
  // 评分组件
  .el-rate {
    .el-rate__item {
      .el-rate__icon {
        &.el-icon.is-active {
          color: #ffd21e !important;
        }
        
        &.el-icon.hover {
          color: #ffd21e !important;
        }

        &.el-icon.is-half {
          color: #ffd21e !important;
        }
      }

      .el-icon {
        &.is-active {
          color: #ffd21e !important;
        }
        
        &.hover {
          color: #ffd21e !important;
        }

        &.is-half {
          color: #ffd21e !important;
        }
      }

      .el-rate__decimal {
        position: absolute !important;
        display: inline-block !important;
        color: #ffd21e !important;
        transform: translateX(0) !important;
        z-index: 1 !important;
      }
    }

    &:not(.is-disabled) {
      .el-rate__item {
        .el-rate__icon, .el-icon {
          &.hover {
            color: #ffd21e !important;
            transform: scale(1) !important;
          }
          
          &.is-active {
            color: #ffd21e !important;
          }
          
          &.is-half {
            color: #ffd21e !important;
          }
        }
      }
    }
  }
  
  // 特定场景评分组件样式
  .spot-rating,
  .hotel-rating,
  .review-rating {
    .el-rate__item {
      .el-rate__icon,
      .el-icon {
        &.is-active,
        &.hover,
        &.is-half {
          color: #ffd21e !important;
        }
      }

      .el-rate__decimal {
        color: #ffd21e !important;
      }
    }
  }
  
  // 确保评分组件在所有场景下的样式
  .el-rate__item {
    .el-icon,
    .el-rate__icon {
      &.is-active,
      &.hover,
      &.is-half {
        color: #ffd21e !important;
      }
    }

    .el-rate__decimal {
      color: #ffd21e !important;
    }
  }
  
  // 标签组件
  .el-tag {
    &.el-tag--info {
      background-color: var(--el-tag-bg-color) !important;
      border-color: var(--el-tag-border-color) !important;
      color: var(--el-tag-text-color) !important;
      
      .el-tag__close {
        color: var(--el-text-color-regular);
        
        &:hover {
          color: var(--el-text-color-primary);
          background-color: var(--el-fill-color);
        }
      }
    }
  }
  
  // 分页组件
  .el-pagination {
    button {
      background-color: var(--el-pagination-button-bg-color) !important;
      color: var(--el-text-color-regular) !important;
      
      &:disabled {
        background-color: var(--el-pagination-button-disabled-bg-color) !important;
        color: var(--el-text-color-placeholder) !important;
      }
    }
    
    .el-pager li {
      background-color: var(--el-pagination-button-bg-color) !important;
      color: var(--el-text-color-regular) !important;
      
      &.is-active {
        color: var(--el-color-primary) !important;
        background-color: var(--el-fill-color) !important;
      }
      
      &:hover {
        color: var(--el-pagination-hover-color) !important;
      }
    }
  }
  
  // 评分统计区域
  .rating-stats {
    background-color: var(--el-fill-color-dark) !important;
    
    .overall-rating {
      .el-rate__icon {
        color: #ffd21e !important;
      }
    }
    
    .rating-bar {
      .bar {
        background-color: var(--el-fill-color) !important;
        
        .progress {
          background-color: #ffd21e !important;
        }
      }
    }
  }
} 